<template>
  <view class="container" style="overflow-y: auto">
    <view class="user-info">
      <img :src="avatarUrl || ''" class="user-img" />
      <uni-icons
        class="add-avatar"
        type="plus-filled"
        color="#0092FF"
        size="40"
        @click="chooseFile"
      />
    </view>
    <view class="form-item name">
      <view class="title">昵称</view>
      <input class="uni-input" placeholder="用户昵称" v-model="nickname" />
    </view>
    <button type="primary" class="save" @tap="saveUserInfo">
      保存个人资料
    </button>
  </view>
</template>

<script setup>
import { wxupdateUser } from "@/global/userApi";
let avatarUrl = ref("");
let nickname = ref("");
let userId = uni.getStorageSync("currentUserId");
import useLogin from "@/store/useLogin.js";
const useLoginStore = useLogin();

onLoad(() => {
  nickname.value = useLoginStore.user.nickname;
  avatarUrl.value = useLoginStore.user.avatarUrl;
});

const saveUserInfo = () => {
  if (!nickname.value) {
    uni.showToast({
      title: `昵称不能为空,请输入昵称`,
      icon: "none",
      duration: 2000,
    });
    return;
  }
  wxupdateUser({
    nickname: nickname.value,
    avatarUrl: avatarUrl.value,
    userId,
  }).then((res) => {
    if (res.code === 200) {
      uni.navigateBack();
    }
  });
};

const chooseFile = () => {
  uni.chooseImage({
    count: 1,
    mediaType: ["image"],
    sizeType: ["compressed"],
    camera: "back",
    success: (res) => {
      let baseUrl = import.meta.env.VITE_APP_BASE_API_CHAT;
      avatarUrl.value = res.tempFilePaths[0];
      uni.showLoading({
        title: "加载中",
      });
      uni.uploadFile({
        url: baseUrl + "/chatmgt/app/avatar",
        filePath: res.tempFiles[0].path || "",
        name: "avatarFile",
        formData: {},
        headers: { "Content-Type": "multipart/form-data" },
        success: (uploadFileRes) => {
          let res = JSON.parse(uploadFileRes.data);
          if (res.code == 200) {
            let url = res.data;
            avatarUrl.value = url;
            uni.hideLoading();
          } else {
            uni.hideLoading();
            uni.showToast({
              icon: "error",
              title: uploadFileRes.errMsg,
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            icon: "error",
            title: JSON.stringify(err),
          });
          uni.hideLoading();
          console.log("图片上传接口调用失败", err);
        },
      });
    },
  });
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  overflow: hidden;
  width: 100%;
}
.user-info {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 80rpx;
  position: relative;
  .user-img {
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
  }
  .add-avatar {
    position: absolute;
    left: 50%;
    bottom: -10rpx;
    margin-left: 30rpx;
  }
}
.form-item {
  width: 85%;
  margin: 0 auto;
  border: 2rpx solid #ccc;
  padding: 20rpx 2.5%;
  border-radius: 20rpx;
  margin-top: 40rpx;
  background-color: #e4e4e442;
  .title {
    font-weight: bold;
    font-size: 32rpx;
    color: #000;
    margin-right: 25rpx;
  }
  textarea {
    margin-top: 20rpx;
    font-size: 30rpx;
    height: 150rpx;
  }
}

.name {
  display: flex;
  input {
    flex: 1;
    font-size: 30rpx;
  }
}

.save {
  background-color: #007aff;
  width: 90%;
  margin: 50rpx auto;
}
</style>
